<template>
	<view class="personal-data">
		<view class="personalBox">
			<view class="personalList">
				<view class="personalItem">
					<view class="personalName">头像</view>
					<view class="personal_R" @click="showMenu=!showMenu">
						<view class="personalImage">
							<image src="../../static/index/index_content.png" mode="" v-if="!imageUrl"></image>
							<image :src="getImage(imageUrl)" v-else></image>
						</view>
						<u-icon name="arrow-right" color="#BFBFBF" size="30"></u-icon>
					</view>
				</view>
				<!-- 更换头像弹窗 -->
				<view class="sheetBox">
					<u-action-sheet :list="MenuList" v-model="showMenu" @click="selectMenu"></u-action-sheet>
				</view>
				<!-- 更换头像弹窗 -->
				<view class="personalItem">
					<view class="personalName">昵称</view>
					<view class="personal_R" @click="showEditName">
						<view class="personaltitle">{{UserName?UserName:"暂未设置"}}</view>
						<u-icon name="arrow-right" color="#BFBFBF" size="30"></u-icon>
					</view>
				</view>
				<!-- 更改昵称弹窗 -->
				<view class="popupBox">
					<u-modal v-model="showName" title="修改昵称" :show-cancel-button="true" @confirm="modifyName">
						<view style="padding:64upx;">
							<input type="text" v-model="UserNameVal" placeholder="请输入" maxlength="18" />
						</view>
					</u-modal>
				</view>
				<view class="personalItem">
					<view class="personalName">简介</view>
					<view class="personal_R" @click="showEditIntro">
						<view class="personaltitle">点击修改</view>
						<u-icon name="arrow-right" color="#BFBFBF" size="30"></u-icon>
					</view>
				</view>
				<!-- 更改简介弹窗 -->
				<view class="popupBox">
					<u-modal v-model="showIntro" title="修改简介" :show-cancel-button="true" @confirm="modifyIntro">
						<view style="padding:64upx;">
							<!-- <input type="text"  v-model="intro"/> -->
							<textarea v-model="intro" placeholder="请输入简介" style="width: 100%;" />
						</view>
					</u-modal>
				</view>
				<!-- 更改昵称弹窗 -->
				<view class="personalItem">
					<view class="personalName">性别</view>
					<view class="personal_R" @click="showGender=true">
						<view class="personaltitle">{{Gender}}</view>
						<u-icon name="arrow-right" color="#BFBFBF" size="30"></u-icon>
					</view>
				</view>
				<!-- 更换性别弹窗 -->
				<view class="sheetBox">
					<u-action-sheet :list="GenderList" v-model="showGender" @click="SelectGender"></u-action-sheet>
				</view>
				<!-- 更换性别弹窗 -->
				<view class="personalItem">
					<view class="personalName">地区</view>
					<picker mode="multiSelector" :range="addressList" range-key="name" @change="choiceAddress" @columnchange="changeColumn" :value="cityArr">
						<view class="personal_R">
							<view class="personaltitle">{{cityArr.length>0?addressList[0][cityArr[0]].name+addressList[1][cityArr[1]].name+addressList[2][cityArr[2]].name:"请选择"}}</view>
							<u-icon name="arrow-right" color="#BFBFBF" size="30"></u-icon>
						</view>
					</picker>
				</view>
				<!-- <view class="pickerBox">
					<u-picker v-model="showpicker" mode="region" @confirm="confirmpicker"></u-picker>
				</view> -->
				<view class="personalItem">
					<view class="personalName">活动区域(区域一)</view>
					<view class="personal_R" @click="toChoiceDistrict" data-type="one">
						<view class="personaltitle">{{areaList.length>0?areaList[0].BusinessAreas.name:'请选择'}}</view>
						<u-icon name="arrow-right" color="#BFBFBF" size="30"></u-icon>
					</view>
				</view>
				<!-- <view class="personalItem">
					<view class="personalName">活动具体地址(区域一)</view>
					<view class="personal_R" @click="chooseAddress">
						<view class="personaltitle">请选择</view>
						<u-icon name="arrow-right" color="#BFBFBF" size="30"></u-icon>
					</view>
				</view> -->
				<view class="personalItem" v-if="areaList.length>0">
					<view class="personalName">活动区域(区域二)</view>
					<view class="personal_R" @click="toChoiceDistrict" data-type="two">
						<view class="personaltitle">{{areaList.length>1?areaList[1].BusinessAreas.name:'请选择'}}</view>
						<u-icon name="arrow-right" color="#BFBFBF" size="30"></u-icon>
					</view>
				</view>
				<!-- <view class="personalItem">
					<view class="personalName">活动具体地址(区域二)</view>
					<view class="personal_R">
						<view class="personaltitle">请选择</view>
						<u-icon name="arrow-right" color="#BFBFBF" size="30"></u-icon>
					</view>
				</view> -->
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				showMenu:false,
				MenuList: [{text: '查看头像'}, {text: '更换头像'}],
				showName:false,
				UserName:"翠花探店",
				showGender:false,
				GenderList: [{text: '男'}, {text: '女'}],
				Gender:"男",
				showpicker:false,
				regionValue:"",
				info:{},
				addressList:[[],[],[]],
				cityArr:[],
				cityStr:"",
				imageUrl:"",
				UserNameVal:"",
				areaList:[],
				intro:"",
				showIntro:false,
				introVal:""
			}
		},
		onShow() {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			this.getUserInfo();
			this.getAreaList();
		},
		onLoad() {
			
		},
		methods: {
			getAreaList(){
				this.$u.api.userBusinessAreasList({user_id:uni.getStorageSync("userId")}).then(res=>{
					console.log(res)
					this.areaList = res.data.list;
				})
			},
			chooseAddress(e){
				let lat = e.target.dataset.lat || e.currentTarget.dataset.lat;
				let lng = e.target.dataset.lng || e.currentTarget.dataset.lng;
				if(lat){
					uni.chooseLocation({
						latitude:lat,
						longitude:lng,
						success:res=>{
							console.log(res)
						}
					})
				}else{
					uni.chooseLocation({
						success:res=>{
							console.log(res)
						}
					})
				}
				
			},
			toChoiceDistrict(e){
				console.log(e)
				if(!this.cityStr){
					this.$refs.uToast.show({
						title:"请先选择地区",
						type:"error",
						duration:2000
					})
					return false;
				}
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				console.log(type)
				if(type=="one"){
					if(this.areaList.length>=1){
						let str = "/pages/pagetwo/pages/district/district?type=edit&form=one&id="+this.addressList[1][this.cityArr[1]].id+"&proid="+this.areaList[0].id;
						console.log(str)
						uni.navigateTo({
							url:str
						})
					}else{
						uni.navigateTo({
							url:"/pages/pagetwo/pages/district/district?form=one&id="+this.addressList[1][this.cityArr[1]].id
						})
					}
				}else if(type=="two"){
					if(this.areaList.length==2){
						let str = "/pages/pagetwo/pages/district/district?type=edit&form=one&id="+this.addressList[1][this.cityArr[1]].id+"&proid="+this.areaList[1].id;
						console.log(str)
						uni.navigateTo({
							url:str
						})
					}else{
						uni.navigateTo({
							url:"/pages/pagetwo/pages/district/district?form=two&id="+this.addressList[1][this.cityArr[1]].id
						})
					}
				}
			},
			showEditName(){
				this.showName = true;
				this.UserNameVal = this.UserName;
			},
			showEditIntro(){
				this.showIntro = true;
				this.intro = this.introVal;
			},
			getImage(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			choiceAddress(e){
				console.log(e)
				this.cityArr = e.detail.value;
				this.cityStr = this.addressList[0][e.detail.value[0]].name + this.addressList[1][e.detail.value[1]].name + this.addressList[2][e.detail.value[2]].name;
				let obj = {};
				obj.province_id = this.addressList[0][e.detail.value[0]].id;
				obj.city_id = this.addressList[1][e.detail.value[1]].id;
				obj.area_id = this.addressList[2][e.detail.value[2]].id;
				obj.area_str = JSON.stringify(this.cityArr);
				this.$u.api.userEdit(obj).then(rej=>{
					this.$refs.uToast.show({
						title:"修改成功",
						type:"success",
						duration:2000
					})
					this.getUserInfo();
					this.getAreaList();
				})
			},
			changeColumn(e){
				console.log(e)
				if(e.detail.column==0){
					this.getAddress(this.addressList[0][e.detail.value].id,true);
				}else if(e.detail.column==1){
					this.getAddress(this.addressList[1][e.detail.value].id);
				}
			},
			getAddress(id,defaults){
				let obj = {};
				obj.area_parent_id = id;
				this.$u.api.areaList(obj).then(res=>{
					console.log(res)
					if(id==0){
						this.addressList.splice(0,1,res.data.list);
						if(this.info.province_id){
							this.getAddress(this.info.province_id,true);
						}else{
							this.getAddress(res.data.list[0].id,true);
						}
					}else{
						if(defaults){
							this.addressList.splice(1,1,res.data.list);
							if(this.info.city_id){
								this.getAddress(this.info.city_id);
								if(this.info.area_str){
									this.cityArr = JSON.parse(this.info.area_str);
									this.cityStr = "true"
								}
							}else{
								this.getAddress(res.data.list[0].id);
							}
						}else{
							this.addressList.splice(2,1,res.data.list);
						}
						
					}
				})
			},
			getUserInfo(){
				this.$u.api.userDetails({user_id:uni.getStorageSync("userId")}).then(res=>{
					console.log(res)
					this.info = res.data.data;
					this.UserName = this.info.username;
					this.Gender = this.info.gender == 1 ? "男" : "女";
					this.imageUrl = this.info.image_url;
					this.intro = this.info.introduce;
					this.getAddress(0);
				})
			},
			//选择地区
			confirmpicker(e){
				// console.log(e);
				this.regionValue = e.province.label+"-"+e.city.label+"-"+e.area.label
			},
			// 修改性别
			SelectGender(index){
				this.Gender = this.GenderList[index].text;
				let obj = {};
				if(index==0){
					obj.gender = 1;
				}else{
					obj.gender = 2;
				}
				this.$u.api.userEdit(obj).then(rej=>{
					this.$refs.uToast.show({
						title:"修改成功",
						type:"success",
						duration:2000
					})
					this.getUserInfo();
				})
				
			},
			//更换头像
			selectMenu(index){
				if(index==0){
					// alert("选择了查看头像")
					uni.previewImage({
						urls:[this.getImage(this.imageUrl)],
						url:this.getImage(this.imageUrl)
					})
				}else if(index==1){
					// alert("选择了更换头像")
					let _this = this;
					uni.chooseImage({
						count:1,
						sizeType:["compressed"],
						success(result) {
							console.log(result)
							app.$vm.updataAvator(result.tempFilePaths[0]).then(res=>{
								console.log(res)
								_this.imageUrl = res;
								let obj = {};
								obj.image_url = _this.imageUrl;
								_this.$u.api.userEdit(obj).then(rej=>{
									_this.$refs.uToast.show({
										title:"修改成功",
										type:"success",
										duration:2000
									})
									_this.getUserInfo();
								})
							});
						},
						fail:err=>{
							if(err.errMsg!='chooseImage:fail cancel'){
								app.$vm.checkAuth("scope.camera").then(resultConfirm=>{
									if(resultConfirm){
										uni.showModal({
											title:"系统繁忙，请稍后再试"
										})
									}else{
										uni.showModal({
											title:"请检查摄像头和相册权限后重试"
										})
									}
								})
							}
						}
					})
				}
			},
			//修改昵称
			modifyName(){
				// alert("修改成功")
				let obj = {};
				obj.username = this.UserNameVal;
				this.$u.api.userEdit(obj).then(res=>{
					this.$refs.uToast.show({
						title:"修改成功",
						type:"success",
						duration:2000
					})
					this.getUserInfo();
				})
			},
			modifyIntro(){
				let obj = {};
				obj.introduce = this.intro;
				this.$u.api.userEdit(obj).then(res=>{
					this.$refs.uToast.show({
						title:"修改成功",
						type:"success",
						duration:2000
					})
					this.getUserInfo();
				})
			}
		}
	}
</script>

<style scoped lang="less">
.status_bar{
	height: var(--status-bar-height);
	width: 100%;
}
.personal-data{
	background-color: #F3F3F3;
	min-height: 100vh;
	overflow: auto;
	// padding-top: 88upx;
	.personalBox{
		padding: 16upx 0;
		.personalList{
			padding: 0 24upx;
			background-color: #fff;
			.personalItem{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 42upx 0;
				border-bottom: 2upx solid #EFEFEF;
				.personalName{
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
				.personal_R{
					display: flex;
					align-items: center;
					.personaltitle{
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-right: 8upx;
					}
					.personalImage{
						width: 48upx;
						height: 48upx;
						border-radius: 50%;
						overflow: hidden;
						// background-color: #F0AD4E;
						margin-right: 8upx;
						image{
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}
			}
		}
	}
}
</style>
